import { View, Textarea } from "@tarojs/components";
import { Button, Rate, Uploader } from "@nutui/nutui-react-taro";
import { useImmer } from "use-immer";
import { RatingInput } from "@/apis/__generated/model/static";
import { beforeXhrUpload } from "@/utils/upload";
import Taro from "@tarojs/taro";
import { api } from "@/utils/api-instance";
import "./rating.scss";

export default function Rating() {
  const [form, setForm] = useImmer<RatingInput>({
    content: "",
    pictures: [],
    score: 5,
    orderId: "",
  });
  Taro.useLoad(({ id }) => {
    setForm((draft) => {
      draft.orderId = id;
    });
  });
  const submit = () => {
    api.ratingForFrontController
      .save({
        body: form,
      })
      .then(() => {
        Taro.showToast({ title: "评价成功" });
        Taro.navigateBack();
      });
  };
  return (
    <View className="rating">
      <View className="content">
        <Textarea
          value={form.content}
          onInput={(event) => {
            setForm((draft) => {
              draft.content = event.detail.value;
            });
          }}
        ></Textarea>
        <Rate
          className="rate"
          value={form.score}
          onChange={(e) => {
            setForm((draft) => {
              draft.score = e;
            });
          }}
        ></Rate>
        <Uploader
          beforeXhrUpload={beforeXhrUpload}
          maxCount={5}
          multiple
          onChange={(result) => {
            console.log(result);
          }}
          onSuccess={(params) => {
            setForm((draft) => {
              draft.pictures = params.files.map(
                (item) => item.responseText as string,
              );
            });
          }}
        ></Uploader>
      </View>
      <View className="bottom">
        <Button className="submit-btn" block type="primary" onClick={submit}>
          提交
        </Button>
      </View>
    </View>
  );
}
